<template>
    <div class="transfer">
      <a-transfer
        :row-key="(record) => record.id"
        :data-source="costCenterData"
        show-search
        :titles="['未选成本中心', '已选成本中心']"
        :operations="['选定', '移除']"
        :filter-option="(inputValue, item) => item.name.indexOf(inputValue) !== -1"
        :target-keys="targetKeys"
        :render="(item) => item.name"
        @change="handleChange"
      />
    </div>
  </template>
    <script>
  import { getAction } from '@api/manage'
  export default {
    data() {
      return {
        spinning: false,
        costCenterData: [],
        storeName: '',
        targetKeys: [], //显示在右侧框数据的key的集合
        selectedKeys: [],
        ipagination: {
          current: 1,
          pageSize: 999,
        },
        url: {
          costCenterList: '/hzkj-system/sys/costCenter/queryAllByOrgUserId',
          queryCostCenterByUser: '/hzkj-system/sys/costCenter/queryCostCenterByUser',
        },
      }
    },
    methods: {
      handleChange(targetKeys, direction, moveKeys) {
        this.targetKeys = targetKeys
      },
      //获取用户可选择的成本中心
      getInitData(id) {
        getAction(this.url.costCenterList, {userId:id}).then((res) => {
          if (res.success) {
            this.costCenterData =res.result || []
          } else {
            this.$message.warning(res.message)
          }
          if(id){
            //回显选中数据
            this.getQuerySelectedIds(id)
          }
        })
      },
        //回显选中数据
      getQuerySelectedIds(id){
          getAction(this.url.queryCostCenterByUser, {userId:id})
            .then(res=>{
              if(res.success){
               this.targetKeys = res.result ||[]
              }else{
                this.$message.warning(res.message)
              }
            })
      },
    },
  }
  </script>
    <style lang="less" scoped>
  /deep/.ant-transfer-list {
    width: 300px;
    height: 600px;
    padding-top: 40px !important;
    .ant-transfer-list-header{
      padding: 5px 12px 5px;
    } 
    .ant-transfer-list-header-title {
      color: #c3c3c3;
    }
    .ant-transfer-list-body-with-search{
      padding-top: 40px;
    }
    .ant-transfer-list-body-search-wrapper{
      padding: 0 12px !important;
    }
    .ant-transfer-list-search-action{
        line-height: 0;
    }
  }
  .transfer {
    display: flex;
    justify-content: center;
    margin-top: 15px;
  }
  </style>